<template>
	<div class="related-movies">
		<!-- 相关影片 -->
		<header>
			<span>相关影片</span>
		</header>
		<div class="movies">
			<ul>
				<li v-for="item in relatedMovies" :key="item.id">
					<router-link :to="`/moviepage/${item.id}`" :key="item.id">
						<div class="img-box">
							<img :src="item.img" alt="" />
							<div class="img-mask"></div>
							<div class="grade">
								<span>猫眼评分</span>
								<span class="score">{{ item.sc }}</span>
							</div>
						</div>
						<span class="name">{{ item.title }}</span>
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			relatedMovies: Array,
		},
	};
</script>

<style lang="less" scoped>
	.related-movies {
		margin-top: 8px;
		background-color: #fff;

		header {
			height: 45px;
			padding-left: 15px;
			font-size: 15px;
			line-height: 45px;
			color: #333;

			span {
				font-size: 15px;
				line-height: 45px;
				color: #333;
			}
		}

		.movies {
			ul {
				display: flex;
				justify-content: flex-start;
				padding: 0 13px;
				overflow-x: scroll;

				li {
					flex-shrink: 0;
					padding: 0 4px 15px 0;

					.img-box {
						position: relative;
						width: 96px;
						height: 134px;
						border-radius: 2px;
						overflow: hidden;

						.img-mask {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							background-image: linear-gradient(-180deg,
									rgba(29, 29, 29, 0) 68%,
									#1d1d1d);
						}

						img {
							display: block;
							width: 100%;
							height: 100%;
						}

						.grade {
							position: absolute;
							top: 114px;
							left: 6px;
							font-size: 11px;
							color: #faaf00;

							span {
								font-size: 11px;
								color: #faaf00;
							}
						}
					}

					.name {
						display: block;
						width: 96px;
						font-size: 15px;
						color: #333;
						margin-top: 7px;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}
				}
			}
		}
	}
</style>
